<template>
    <div class="addline">
        <div class="addlineNavBar">
            <van-nav-bar title="添加路线">
            </van-nav-bar>
        </div>
        <div class="addlineInfo">
            <div class="cityselect">
                <van-field
                    readonly
                    clickable
                    input-align="right"
                    name="begincity"
                    :value="begincity"
                    label="开始城市"
                    placeholder="请选择"
                    @click="showPicker = true"
                    />
                    <van-popup v-model="showPicker" position="bottom">
                    <van-picker
                        show-toolbar
                        :columns="columns"
                        @confirm="onConfirm"
                        @cancel="showPicker = false"
                    />
                </van-popup>
                <van-field
                    readonly
                    clickable
                    input-align="right"
                    name="lastcity"
                    :value="lastcity"
                    label="目的地城市"
                    placeholder="请选择"
                    @click="showPicker = true"
                    />
                    <van-popup v-model="showPicker" position="bottom">
                    <van-picker
                        show-toolbar
                        :columns="columns"
                        @confirm="onConfirm"
                        @cancel="showPicker = false"
                    />
                </van-popup>
            </div>
            <div class="transportFees">
                 <van-field
                    readonly
                    clickable
                    input-align="right"
                    name="transport"
                    :value="transport"
                    label="运输方式"
                    placeholder="请选择"
                    @click="showPicker = true"
                    />
                    <van-popup v-model="showPicker" position="bottom">
                    <van-picker
                        show-toolbar
                        @cancel="showPicker = false"
                    />
                </van-popup>
                <van-field
                    readonly
                    clickable
                    input-align="right"
                    name="fees"
                    :value="fees"
                    label="计费方式"
                    placeholder="请选择"
                    @click="showPicker = true"
                    />
                    <van-popup v-model="showPicker" position="bottom">
                    <van-picker
                        show-toolbar
                        @cancel="showPicker = false"
                    />
                </van-popup>
            </div>
            <div class="unitPrice">
                <van-field v-model="unitprice" label="收费单价" placeholder="请填写收费单价" />
            </div>
            <div class="storage">
                <van-field
                    readonly
                    clickable
                    input-align="right"
                    name="storage"
                    :value="storage"
                    label="是否支持冷藏"
                    placeholder="请选择"
                    @click="showPicker = true"
                    />
                    <van-popup v-model="showPicker" position="bottom">
                    <van-picker
                        show-toolbar
                        @cancel="showPicker = false"
                    />
                </van-popup>
            </div>
            <div class="affirm">
                <van-button color="#00C657">
                    确认添加
                </van-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'addline',
    data(){
        return{
            storage:'',
            unitprice:'',
            fees:'',
            transport:'',
            begincity: '',
            lastcity:'',
            columns: ['昆明', '曲靖', '昭通', '大理', '丽江'],
            showPicker: false,
        }
    },
    methods:{
        onConfirm(value) {
            this.value = value;
            this.showPicker = false;
        },
    }
}
</script>

<style scoped>
.addline{
    background-color: rgba(247,249,252,1);
}
.addlineInfo{
    margin-top: 10px;
}
.cityselect{
    margin-top: 10px;
}
.transportFees{
    margin-top: 10px;
}
.unitPrice{
    margin-top: 10px;
}
.affirm{
    margin-top: 27px;
}
.affirm button{
    width: 95%;
    margin: 10px 13px;
}

</style>